import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    userInfo: [],
    avatarUrl: "",
    editingCoverUrl: "",
    showLoader: false,
  },
  mutations: {
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo;
    },
    setAvatarUrl(state, avatarUrl) {
      state.avatarUrl = avatarUrl;
    },
    setShowLoader(state, showLoader) {
      state.showLoader = showLoader;
    },
    setEditingCoverUrl(state, editingCoverUrl) {
      state.editingCoverUrl = editingCoverUrl;
    },
  },
  actions: {},
  modules: {},
});

export default store;

// 因为Vuex的数据状态commit没有代码提示,这里对提交方法和数据获取进行了函数封装
const StoreHandler = {
  getters: {
    getUserInfo() {
      return store.state.userInfo;
    },
    getAvatarUrl() {
      return store.state.avatarUrl;
    },
    getShowLoader() {
      return store.state.showLoader;
    },
    getEditingCoverUrl() {
      return store.state.editingCoverUrl;
    },
  },
  setters: {
    setUserInfo(userInfo) {
      store.commit("setUserInfo", userInfo);
    },
    setAvatarUrl(avatarUrl) {
      store.commit("setAvatarUrl", avatarUrl);
    },
    setArticleInfo(articleInfo) {
      store.commit("setArticleInfo", articleInfo);
    },
    setShowLoader(showLoader) {
      store.commit("setShowLoader", showLoader);
    },
    setEditingCoverUrl(editingCoverUrl) {
      store.commit("setEditingCoverUrl", editingCoverUrl);
    },
  },
};

export { StoreHandler };
